<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
 <style>
     input{
         width: 200px;
         height: 40px;
         font-size: 24px;
     }
     table{
         margin-top: 50px;
     }
     th,tr,td{
         width: 200px;
         height: 40px;
         text-align: center;
         border: 1px solid black;
     }
     button{
         width: 100px;
         height: 40px;
     }
 </style>
<body>
    <input type="text" placeholder="姓名">
    <input type="text" placeholder="年龄">
    <input type="text" placeholder="性别">
    <button>提交</button>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>
        
        <tbody></tbody>
    </table>
</body>
<script>
    $('button:first').click(function(){
        var name = $('input:first').val()
        var age = $('input:eq(1)').val()
        var gender = $('input:last').val()
        var str = ''
        for (let i = 0; i < 1; i++) {
            str += `<tr>
                        <th>${name}</th>
                        <th>${age}</th>
                        <th>${gender}</th>
                        <th><button>删除</button></th>
                    </tr>`
        }
        $('tbody').html(str)
    })
</script>
</html>